const listArr = [
  "家庭婚姻",
  "借款借贷",
  "交通事故",
  "房产纠纷",
  "刑事辩护",
  "合同纠纷",
  "经济纠纷",
  "劳动工伤",
  "土地纠纷",
  "消费权益",
  "侵权",
  "医疗纠纷",
  "公司事务",
  "行政诉讼",
  "知识产权",
  "保险理赔",
  "征地拆迁",
  "工程建设",
  "涉外/海关",
  "综合咨询",
];
const detailsArrr = [
  [
    "离婚",
    "夫妻财产/债务",
    "抚养",
    "家暴",
    "彩礼",
    "赡养",
    "婚前财物争议",
    "继承",
    "收养",
    "其他",
  ],
  ["借钱不还", "网络借贷", "高利贷", "担保抵押", "其他"],
  ["交通事故认定", "伤残鉴定", "酒后驾车", "交通肇事", "肇事逃逸", "其他"],
  [
    "房屋买卖",
    "房产赠与/继承",
    "房屋产权",
    "房屋租赁",
    "购房定金",
    "物业纠纷",
    "房屋质量",
    "房屋抵押",
    "法院查封房产",
    "车库归属",
    "其他",
  ],
  [
    "经济犯罪",
    "取保候审",
    "人身伤害",
    "毒品犯罪",
    "公司犯罪",
    "死刑辩护",
    "刑事自诉",
    "刑事合规",
    "职务犯罪",
    "其他",
  ],
  ["合同违约", "合同解除", "合同欺诈", "延迟履行", "其他"],
  ["不限"],
  [
    "工伤赔偿",
    "劳动仲裁",
    "未签合同",
    "拖欠工资",
    "工商认定",
    "辞职解雇",
    "劳动诉讼",
    "未缴社保",
    "加班工资",
    "其他",
  ],
  ["土地使用权", "土地承包", "土地流转", "土地抵押", "其他"],
  ["网络购物纠纷", "欺诈隐瞒事实", "虚假广告", "强买强卖", "卫生问题", "其他"],
  ["人身侵权", "网络侵权", "财产侵权", "其他"],
  [
    "医疗事故赔偿",
    "医患纠纷",
    "误诊/延误治疗",
    "医疗事故鉴定",
    "医疗纠纷诉讼",
    "医疗欺诈",
    "非法行医",
    "其他",
  ],
  [
    "法律顾问",
    "股权纠纷",
    "破产清算",
    "公司上市",
    "改制重组",
    "合伙联营",
    "工商税务",
    "经济仲裁",
    "公司解散",
    "兼收并购",
    "反不正当竞争",
    "其他",
  ],
  ["不限"],
  ["商标", "著作权", "专利", "高新技术", "其他"],
  ["据赔", "理赔流程", "拖欠理赔", "其他"],
  ["拆迁补偿", "拆迁补偿分配", "拆迁安置", "强拆", "征地协议", "其他"],
  [
    "拖欠工程款",
    "结算/分包",
    "工程质量与保修",
    "合同违约与赔偿",
    "建材质量问题",
    "其他",
  ],
  [
    "合资合作",
    "海事海商",
    "移民留学",
    "涉外法律",
    "海关商检",
    "国际贸易",
    "外商投资",
    "招商引资",
    "其他",
  ],
  ["不限"],
];
//将listarr内容输出到页面
//1利用jq的遍历数组方式
$.each(listArr, function (i, v) {
  $("#list").append(`<li>${v}</li>`);
});
// $("#list").html(listArr.map((v) => `<li>${v}</li>`));//2利用js数组方法将内容显示到页面
//将detailsArr内容输入到页面
$("#details").html(
  detailsArrr
    .map((v) => v.map((v) => `<li>${v}</li>`).join(""))
    .map((v) => `<ul id="ul-details">${v}</ul>`)
);
//给列表默认显示内容添加默认样式
$("#list li")
  .eq(0)
  .css({ color: "red", backgroundColor: "rgb(254, 254, 254)" });
//让默认显示的列表的display为block
$("#details ul").eq(0).css("display", "block");
//给列表添加点击事件（选项卡）
$("#list").on("click", "li", function (ev) {
  $("#list li").each((v, i) => {
    if (ev.target.innerHTML == $("#list li").eq(v).html())
      $("#list li")
        .eq(v)
        .css({ color: "red", backgroundColor: "rgb(254, 254, 254)" }),
        $("#details ul").eq(v).css("display", "block");
    else
      $("#list li")
        .eq(v)
        .css({ color: "black", backgroundColor: "rgb(242, 242, 242)" }),
        $("#details ul").eq(v).css("display", "none");
  });
});
